<template>
	<view>
		<nv :config="config"></nv>
		<view style="background-color: #FFFFFF;padding: 30rpx 30rpx 30rpx 30rpx;">
			<view class="titleBox text-xl text-black text-bold">{{prodDetail.title}}</view>
			<view class="timeBox text-df text-gray margin-top-sm margin-bottom-sm">{{prodDetail.date}}</view>
			<!-- <image mode="widthFix" :src="prodDetail.url"></image> -->

			<!-- 中间文章区域 -->
			<view class="contentBox text-lg text-black margin-top-sm margin-tb-lg">
				<u-parse :content="prodDetail.content" @preview="preview" @navigate="navigate"></u-parse>
			</view>
		</view>
		<u-back-top :scrollTop="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {
		getTeachingDetail
	} from "@/api/lianai.js";
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				config: {
					title: "教学展示",
					color: "#ffffff"
				},
				prodDetail: '',
				proId: '',
				scrollTop: 0, //回到顶部
			}
		},
		onLoad(option) {
			this.proId = option.proId;
		},
		mounted() {
			this.getData();
		},
		//回到顶部,生命周期 中获得滚动条的位置
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onShareAppMessage() {
			return {
				title: this.prodDetail.title,
				path: '/pages/project/detail?proId=' + this.proId
			}
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: this.prodDetail.title,
				path: '/pages/project/detail?proId=' + this.proId
			}
		},
		methods: {
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			},
			getData() {
				//打开加载动画
				uni.showLoading({
					title: '加载中'
				});
				var data = {
					"id": this.proId
				}
				getTeachingDetail(data).then(res => {
					//关闭加载动画
					uni.hideLoading();
					console.log(res)
					if (res.code == 200) {
						this.prodDetail = res.data
						console.log(this.prodDetail)
						this.prodDetail.content = this.prodDetail.content.replace(/<img/gi,
							'<img style="max-width:100%;height:auto"')
					}
				})
			},
			//返回上一层
			arrowLeft() {
				console.log("返回上一层")
				uni.switchTab({
					url: '/pages/index/news'
				});
			},
			//返回首页
			arrowHome() {
				console.log("返回首页")
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style scoped>
	.u-nav-slot {
		display: inline-flex;
		border-radius: 15px;
		border: 1px solid rgb(122 189 255);
		padding: 3px;
	}
</style>
<style lang="scss" scoped>
	button::after {
		border: none;
		background: transparent;
	}

	uni-button {
		background: transparent;
	}

	.news-top {
		height: 0px;
	}

	.container {
		background-color: #f2f2f2;
		width: 750rpx;

	}

	.solid {
		border-radius: 50rpx;
		text-indent: 12rpx;
	}

	image {
		width: 750rpx;
	}

	.bottomBox {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0rpx;
	}

	//富文本图片放大
	.imgDolg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 9999;
		background-color: rgba(0, 0, 0, 0.8);
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		#imgDolgClose {
			position: fixed;
			top: 25px;
			cursor: pointer;
			right: 4%;
			font-size: 50px;
			color: white;
		}

		img {
			width: 60%;
		}
	}
</style>
